#include("./header.html")
#@header("post")

<main class="py-4 py-lg-5">
    <div class="container">
        <div class="row justify-content-lg-center">
            <div class="col-12 col-lg-9">
                <section class="post-header py-4 ">
                    <h1 class="title h3 font-weight-bold font-theme">#(article.title)</h1>
                    <div class="meta text-sm text-muted mt-4">
                        #if(article.order_number > 10)
                        <span class="d-inline-block text-primary">置顶</span><i class="text-primary px-2">&bull;</i> 
                        #end
                        
                        #articleCategories(article.id,"category")
                            #for(category : categories)
                        <a href="#(category.url ??)" target="_blank" class=" text-muted">#(category.title ??)</a>
                        <i class="text-primary px-2">&bull;</i>
                            #end
                        #end
                     <span class="d-inline-block">浏览量： #(article.view_count)<i class="text-primary px-2">&bull;</i></span>
                      <span class="d-inline-block">作者： #(article.user.nickname ??)<i class="text-primary px-2">&bull;</i></span>
                        <span class="d-inline-block pr-3">#date(article.created, "yyyy-MM-dd")</span>
                    </div>
                    <!-- .page-header -->
                </section>
                <section class="position-relative">
                    <div class="">
                        <div class="post-social d-none d-lg-block">
                            <div class="theiaStickySidebar">
                                <ul class="my-n2">
                                    <li class="py-2"><span class="text-muted"><i
                                            class="iconfont icon-navigation-outline2"></i></span></li>
                                    <li class="py-2"><a
                                            href="https://connect.qq.com/widget/shareqq/index.html?url=#(WEB_DOMAIN ??)#(article.url ??)&title=#(article.title)&pics=#(article.thumbnail ??)&summary=#maxLength(article.text,115)"
                                            target="_blank" class="btn btn-light w-40 px-0 qq "><i
                                            class="iconfont icon-qq"></i></a></li>
                                    <li class="py-2"><a
                                            href="https://service.weibo.com/share/share.php?url=#(WEB_DOMAIN ??)#(article.url ??)&type=button&language=zh_cn&title=【#(article.title)】#maxLength(article.text,115)&pic=#(article.thumbnail ??)&searchPic=true"
                                            target="_blank" class="btn btn-light w-40 px-0 weibo "><i
                                            class="iconfont icon-weibo"></i></a></li>
                                    <li class="py-2"><a href="javascript:"
                                                        data-img="http://api.k780.com:88/?app=qr.get&level=L&size=5&data=#(WEB_DOMAIN ??)#(article.url ??)"
                                                        data-title="微信扫一扫 分享朋友圈" data-desc="在微信中请长按二维码" target="_blank"
                                                        class="btn btn-light w-40 px-0 single-popup weixin "><i
                                            class="iconfont icon-weixin"></i></a></li>
                                    <li class="py-2"><a href="#comments" class="btn btn-light w-40 px-0"><i
                                            class="iconfont icon-message-circle-outli1"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="post item item-regular post-4148 type-post status-publish format-standard has-post-thumbnail hentry category-trip tag-1009 special-rzcs">
                        <div class="content-style content content-body">
                            #(article.content)
                            <div class="post-tags mt-4">
                                #articleCategories(article.id,"tag")
                                #for(category : categories)
                                <a href="#(category.url ??)" rel="tag">#(category.title ??)</a>
                                #end
                                #end
                            </div>
                        </div>


                        <div class="d-block d-lg-none post-share text-center mt-4 mt-lg-5">
                            <ul>
                                <li class="d-inline-block px-1"><a
                                        href="https://connect.qq.com/widget/shareqq/index.html?url=#(CPATH)#(article.url ??)&title=#(article.title)&pics=#(article.thumbnail ??)&summary=#maxLength(article.text,65)" target="_blank" class="btn btn-light qq w-40 px-0 rounded-circle"><i
                                        class="iconfont icon-qq"></i></a></li>
                                <li class="d-inline-block px-1"><a
                                        href="https://service.weibo.com/share/share.php?url=#(CPATH)#(article.url ??)&type=button&language=zh_cn&title=【#(article.title)】#maxLength(article.text,115)&pic=#(article.thumbnail ??)&searchPic=true"
                                        target="_blank" class="btn btn-light weibo w-40  px-0 rounded-circle"><i
                                        class="iconfont icon-weibo"></i></a></li>
                                <li class="d-inline-block px-1"><a href="javascript:"
                                                                   data-img="http://api.k780.com:88/?app=qr.get&level=L&size=5&data=#(CPATH) #(article.url ??)"
                                                                   target="_blank"
                                                                   class="btn btn-light weixin w-40 px-0 single-weixin rounded-circle"><i
                                        class="iconfont icon-weixin"></i></a></li>
                                <li class="d-inline-block px-1"><a id="btn-bigger-cover" href="javascript:;"
                                                                   data-id="4148"
                                                                   class="btn btn-light w-40 px-0 rounded-circle btn-bigger-cover"><i
                                        class="iconfont icon-image-"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </section>
                <div id="comments" class="nice-comments py-5">
                    <div id="vcomments"></div>
                    <script>
                        new Valine({
                            el: '#vcomments',
                            avatar: '',
                            recordIP: true,
                            appId: '',
                            appKey: ''
                        })
                    </script>
                </div>
                <!-- #comments -->

                <div class="related-list">
                    <div class="list-header-style2 h5 mb-4"><i
                            class="text-xl text-primary iconfont icon-pricetags-outline pr-2"></i>您可能感兴趣的
                    </div>
                    <div class="post-list list-grid list-bordered my-n4">

                    #articlePage(orderBy="view_count desc", pageSize="5")
                    #for(article : articlePage.list)
                        <div class="list-item block item-regular post-4147 post type-post status-publish format-standard has-post-thumbnail hentry category-trip tag-1007 tag-1008">
                            <div class="list-content py-lg-2">
                                <div class="list-body ">
                                    <div class="text-lg h-2x">
                                        <a href="#(article.url)" class="list-title">#(article.title)</a>
                                    </div>
                                    <div class="d-none d-md-block text-sm text-muted mt-3">
                                        <div class="h-3x">
                                            #maxLength(article.text,115)……
                                        </div>
                                    </div>
                                </div>
                                <div class="list-footer d-flex">
                                    <div class="text-xs text-muted">
                                        #articleCategories(article.id,"category")
                                        #for(category : categories)
                                        <span class="d-inline-block">
                                            <a class="text-muted" href="#(category.url ??)"
                                               target="_blank">#(category.title ??)</a>
                                        </span>
                                        <i class="text-primary px-2">&bull;</i>
                                        #end
                                        #end
                                        <span class="d-inline-block"> #date(article.created, "yyyy-MM-dd")</span>
                                    </div>
                                    <div class="ml-auto text-xs text-muted ">
                                    </div>
                                </div>
                            </div>
                            #if(article.thumbnail != null)
                            <div class="list-image col-3">
                                <div class="media shadow">
                                    <a href="#(article.url ??)" class="media-content"
                                       style="background-image:url('#(article.thumbnail ??)')">
                                    </a>
                                </div>
                            </div>
                            #end
                        </div>
                    #end
                    #end

                    <!--
                    <div class="posts-ajax-load">
                        <button type="button" class="btn btn-light btn-block font-12">加载更多</button>
                    </div>
                    -->
                </div>

            </div>
        </div>
    </div>
    </div>
</main>

#include("./footer.html")
#@footer("post")